<template>
  <view class="product-container">
    <view
    class="product-info-container"
    @click="handleProduct(compositionsDetail.u_id)">
      <!-- 作品图片 -->
      <view class="product-image-content">
        <image
          :src="`http://pic.jiaxianghui.cn/${compositionsDetail.final_image[0]}`"
          mode="aspectFit"
          class="product-image"
        />
      </view>
      <!-- 作品名称 -->
      <view class="product-name">
        {{ compositionsDetail.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Product',
  props: {
    type: {
      type: String,
      default: '1'
    },
    compositionsDetail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      name: 'Product'
    }
  },
  methods: {
    handleProduct(u_id) {
      uni.navigateTo({url: `/pages/works/detail?u_id=${u_id}`})
    }
  }
}
</script>

<style lang="scss" scoped>

  .product-info-container{
    padding: 24rpx;
    width: 100%;
    min-width: 48%;
    background: #fff;
    border-radius: 18rpx;
    margin-bottom: 12rpx;
    color: #000;
  }

  .product-image-content{
    text-align: center;
    margin-bottom: 12rpx;
  }

  .product-image{
    width: 260rpx;
    max-height: 520rpx;
  }

  .product-name{
    font-size: 28rpx;
    margin-bottom: 12rpx;
  }
</style>
